<template>
  <view 
    class="slider-container" 
    :style="{ backgroundImage: `url(${url(props.backgroundImage, '', 'png')})` }"
  >
    <view 
      v-for="(_, index) in 6" 
      :key="index" 
      class="row h-100"
    >
      <view 
        class="image-container "
        :class="{ 
          'slide-right': revealedRows[index] && index % 2 === 0,
          'flip': revealedRows[index] && index % 2 === 1
        }"
        @tap="revealedRows[index] && goToDetail(index)"
      >
        <cover-image 
          v-if="revealedRows[index]"
          :src="getImage(index, 'left')" 
          mode="aspectFill" 
          class="image"
        />
        <button 
          v-else
          class="reveal-btn"
          @tap.stop="startReveal(index)"
          :disabled="currentRow !== index"
        >
          点击揭晓
        </button>
      </view>
      <view 
        class="image-container right"
        :class="{ 
          'slide-left': revealedRows[index] && index % 2 === 1,
          'flip': revealedRows[index] && index % 2 === 0
        }"
        @tap="revealedRows[index] && goToDetail(index)"
      >
        <cover-image 
          v-if="revealedRows[index]"
          :src="getImage(index, 'right')" 
          mode="aspectFill" 
          class="image"
        />
        <button 
          v-else
          class="reveal-btn"
          @tap.stop="startReveal(index)"
          :disabled="currentRow !== index"
        >
          点击揭晓
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import { useCounterStore } from '@/stores/counter'

const url = $url
const store = useCounterStore()

const props = defineProps({
  backgroundImage: {
    type: String,
    default: 'stepbg'
  }
})

const currentRow = ref(0)
const revealedRows = ref(Array(6).fill(false))
let timer = null
let rewardGiven = ref(false)

// 获取图片
const getImage = (index, position) => {
  const baseIndex = index * 2
  let imageIndex
  
  if (position === 'left') {
    imageIndex = baseIndex % 12
  } else {
    imageIndex = (baseIndex + 1) % 12
  }
  
  return url('step', imageIndex, 'png')
}

// 显示奖励提示
const showReward = () => {
  uni.showModal({
    title: '恭喜',
    content: '完成全部制作步骤学习，获得10积分奖励！',
    showCancel: false,
    success: () => {
      // 更新积分
      store.addPoints(10)
    }
  })
}

// 开始揭晓动画
const startReveal = (index) => {
  if (currentRow.value === index && !revealedRows.value[index]) {
    revealedRows.value[index] = true
    
    // 如果是最后一行且还没有给过奖励
    if (index === 5 && !rewardGiven.value) {
      rewardGiven.value = true
      setTimeout(() => {
        showReward()
      }, 1000) // 等动画播放一会儿再显示奖励
    } else if (currentRow.value < 5) {
      timer = setTimeout(() => {
        currentRow.value++
      }, 2000)
    }
  }
}

// 跳转到详情页
const goToDetail = (index) => {
  uni.navigateTo({
    url: `/pages/other/step-detail/index?step=${index}`
  })
}

// 组件卸载前清除定时器
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer)
  }
})
</script>

<style lang="scss" scoped>
.slider-container {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 40rpx 0;
}

.row {
  display: flex;
  justify-content: space-between;
  padding: 0 80rpx;
  height: 100%;
  margin: 20rpx 0;
  position: relative;
}

.image-container {
  width: 240rpx;
  height: 100%;
  position: relative;
  perspective: 1000px;
  transition: transform 1s ease-in-out;
  cursor: pointer;
  
  &.flip {
    animation: flipAnimation 1s ease-in-out forwards;
  }
  
  &.slide-right {
    animation: slideRight 1s ease-in-out forwards;
  }
  
  &.slide-left {
    animation: slideLeft 1s ease-in-out forwards;
  }
  
  &:active {
    opacity: 0.8;
  }
}

.image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
  backface-visibility: hidden;
}

.reveal-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(223, 76, 80, 0.9);
  color: white;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  border: none;
  
  &:disabled {
    background-color: #999;
    cursor: not-allowed;
  }
}

@keyframes flipAnimation {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes slideRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(100vw - 750rpx));
  }
  100% {
    transform: translateX(calc(100vw - 750rpx));
  }
}

@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(-100vw + 750rpx));
  }
  100% {
    transform: translateX(calc(-100vw + 750rpx));
  }
}
</style> 